<template>
  <div class="myDialog">
    <!-- 弹窗组件 -->
    <el-dialog :visible.sync="dialogFormVisible" :before-close="closeDialog" :close-on-click-modal="false" title="报修详情">
      <el-form
        ref="numberValidateForm"
        :model="ValidateForm"
        :inline="true"
        label-position="right"
        label-width="190px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="Handle:" prop="age">
              <span>{{ ValidateForm.age }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="LotID:" prop="age">
              <span>{{ ValidateForm.age }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="IssueGroup:" prop="age">
              <span>{{ ValidateForm.age }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ISSUE_CLASSIFICATION:" prop="age">
              <span>{{ ValidateForm.age }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="ISSUE_DESC:" prop="age">
              <span>{{ ValidateForm.age }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <dynTable
        ref="dynTable"
        :loading="false"
        :table-data="tableData"
        :table-columns="tableColumns"
      />
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'MyDialog',
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      ValidateForm: {
        age: 20
      },
      tableData: [],
      tableColumns: [
        {
          prop: 'ACTION',
          label: 'ACTION'
        },
        {
          prop: 'PRODUCT_NAME',
          label: 'PRODUCT_NAME'
        },
        {
          prop: 'SYSTEM_TIME',
          label: 'SYSTEM_TIME'
        },
        {
          prop: 'VIEW_User',
          label: 'VIEW_User'
        },
        {
          prop: 'ISSUE_GROUP',
          label: 'ISSUE_GROUP'
        },
        {
          prop: 'ISSUE_CLASSIFICATION',
          label: 'ISSUE_CLASSIFICATION'
        },
        {
          prop: 'ISSUE_DESC',
          label: 'ISSUE_DESC'
        },
        { prop: '', label: this.$t('details'), templete: (_scope) => {
          return (
            <el-link
              underline={false}
              type='primary'
              on-click={() => this.scopedHandle(_scope.row)}
            >{ this.$t('details') }</el-link>
          )
        } }
      ]
    }
  },
  created() {},
  methods: {
    scopedHandle(val) {
      this.dialogFormVisible = true
      this.dialogForm = val
    },
    // 重置dialog表单信息
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 打开弹窗
    openDialog(val = {}) {
      this.dialogFormVisible = true
      console.log('子组件接收到了', val)
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogFormVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
